<!--# 
layout("/layout/register_login.html"){ 
 #-->
<div class="row">
	<div class="col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4 center">
		<div class="col-sm-offset-4 col-sm-8">
			<h3>
				<i class="fa fa-sign-in"></i> 登录系统
			</h3>
		</div>
		<form class="form-horizontal">
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-4 control-label">用户</label>
				<div class="col-sm-8">
					<input type="text" class="form-control" id="userName" name="name" placeholder="请输入用户名/注册邮箱" data-type='required'>
				</div>
			</div>

			<div class="form-group">
				<label for="inputPassword3" class="col-sm-4 control-label">密码</label>
				<div class="col-sm-8">
					<input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" data-type='password'>
				</div>
			</div>

			<div class="form-group">
				<label for="inputPassword3" class="col-sm-4 control-label">验证码</label>
				<div class="col-sm-8">
					<div class="input-group">
						<input type="text" id="captcha" class="form-control search-query" placeholder="请输入验证码" name="captcha" data-type="required" data-error="请输入验证码"> <span
							class="input-group-btn"> <a href="javascript:;" class="captchaRefresh"> <img title="点击刷新验证码" src="${base}/captcha" height="34px">
						</a>
						</span>
					</div>
				</div>
			</div>

			<div class="form-group">
				<div class="col-sm-offset-4 col-sm-8">
					<button type="button" class="btn btn-large btn-block btn-primary">登录</button>

					<h3>
						<i class="fa fa-qq"></i> <i class="fa fa-wechat"></i> <i class="fa fa-github"></i> <i class="fa fa-weibo"></i>
					</h3>
				</div>
			</div>
		</form>
	</div>
</div>
<script type="text/javascript">
	$(function() {
		$('.captchaRefresh').on('click', function() {
			$(this).find('img').attr('src', getRootPath() + "/captcha?" + Math.random());
		})
		
		$('body').on('keydown', function() {
			if (event.keyCode == 13) {
				$('.btn-primary').click();
			}
		})
		$('.btn-primary').on('click', function() {
			if ($('.form-horizontal').validation(function(status, dom, errorMsg, defaultValue) {
				status ? function() {
					$(dom).parent().parent().removeClass('has-error').addClass('has-success');
				}.call() : function() {
					validationFail(errorMsg, dom);
					$(dom).parent().parent().removeClass('has-success').addClass('has-error');
				}.call();
			})) {
				$.post(getRootPath() + '/login', $('.form-horizontal').serialize(), function(result) {
					if (result.operationState == 'SUCCESS') {
						location.href = '${base}/'
					} else {
						$('.captchaRefresh').find('img').attr('src', getRootPath() + "/captcha?" + Math.random());
						validationFail(result.data.reason, $('.btn-primary'));
					}
				}, 'json')
			}
		});
	})
</script>
<!--# } #-->